import { defineComponent, ref, PropType } from 'vue';
import { PullRefresh, List, Button } from 'vant';
import Styles from './list.module.scss';
import { StuClass } from '@/domain/correction/types/jobs/classList';
import { StuPlan } from '@/domain/correction/types/jobs/planList';
import { Icon } from 'vant';

export default defineComponent({
  name: 'List',
  props: {
    statusName: {
      type: Array,
      default: () => []
    },
    btnName: {
      type: String,
      default: ''
    },
    btnClick: {
      type: Function,
      default: () => {}
    },
    getList: {
      type: Function,
      default: () => {}
    },
    clearList: {
      type: Function,
      default: () => {}
    },
    changeStatus: {
      type: Function,
      default: () => {}
    },
    list: {
      type: Array as PropType<Array<StuClass | StuPlan>>,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    finished: {
      type: Boolean,
      default: false
    },
    refreshing: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const myindex = ref(0);
    const onLoad = async () => {
      await props.getList();
    };
    const onRefresh = () => {
      props.clearList();
      onLoad();
    };
    return () => (
      <PullRefresh class={Styles['class-list']} v-model={props.refreshing} onRefresh={onRefresh}>
        <div class={Styles['status-list']}>
          <p
            class={myindex.value === 0 ? Styles['active-status'] : Styles['status']}
            onClick={() => {
              props.changeStatus(0);
              myindex.value = 0;
            }}
          >
            {props.statusName[0]}
          </p>
          <p
            class={myindex.value === 1 ? Styles['active-status'] : Styles['status']}
            onClick={() => {
              props.changeStatus(1);
              myindex.value = 1;
            }}
          >
            {props.statusName[1]}
          </p>
        </div>
        <List
          loading={props.loading}
          finished={props.finished}
          onLoad={onLoad}
          v-slots={{ finished: () => <p style="font-family: none;font-weight: normal;color: #999;">没有更多了</p> }}
        >
          {props.list.map((item) => {
            return (
              <div class={Styles['list-item']}>
                <div class={Styles['item-title']}>
                  <Icon style="font-size: 0.6rem; vertical-align: middle;" color="#277DFF" name="stop-circle" />
                  <span class={Styles['title']}>{item.name}</span>
                </div>
                <div class={Styles['item-number']}>
                  <span class={Styles['num']}>待批改：{item.correct_num}份</span>
                  <span class={Styles['num']}>
                    即将超时：<span style="color: #FFBD1D">{item.soon_timeout}份</span>
                  </span>
                  <span class={Styles['num']}>
                    已超时：<span style="color: #E02727">{item.later_timeout}份</span>
                  </span>
                </div>
                <p>
                  <img class={Styles['time-img']} src="https://editor.xesimg.com/tailor/resource/time-1658461159060.png" />
                  <span class={Styles['time-text']}>{item.plan_time}</span>
                </p>
                <div style="margin-top: 1rem">
                  <Button
                    type="primary"
                    block
                    class={Styles['classlist-btn']}
                    onClick={() => {
                      props.btnClick(item);
                    }}
                  >
                    {props.btnName}
                  </Button>
                </div>
              </div>
            );
          })}
        </List>
      </PullRefresh>
    );
  }
});
